<template>
	<view class="register">
		<view class="register_text">
			阿力ALI
		</view>
		<view class="form_data">
			<tm-form
			@submit="submit"
			ref="formData"
			@request="success"
			method="post"> 
			<tm-input prefixp-icon='/static/images/zhanghao.png' name='email'  v-model="email" required :round="0"  :vertical="true" placeholder="请输入正确的邮箱号">
					<template v-slot:rightBtn>
						<tm-button theme="bg-gradient-blue-accent" @click="daojs()" :round="0" :font-size="24"  :height="84" block :width="120">
							<tm-countdown ref="daojishi" :autoStart="false" :time="60*1000">
								<template v-slot:default="{timeData}">
									{{timeData.finish==false&&timeData.data.seconds!=='00'?'剩'+timeData.data.seconds+'秒':'验证码'}}
								</template>
							</tm-countdown>
						</tm-button>
					</template>
				</tm-input>
				<tm-input name="code" required  v-model="code" placeholder="请输入验证码" prefixp-icon='/static/images/mima.png' :adjust-position='true' input-type='number' :maxlength='15'></tm-input>
				<tm-input name="password" required  v-model="password" placeholder="请输入密码" prefixp-icon='/static/images/mima.png' :adjust-position='true' input-type='password' :maxlength='11'></tm-input>
				<view style="text-align: center;">
					<tm-button navtie-type="form"  :disabled='!checked' :theme="!checked?'#9E9E9E':'bg-gradient-orange-accent'">注册并登录</tm-button>
				</view>
			</tm-form>
		</view>
		<view class="register_xy">
			<tm-checkbox v-model="checked" :size='23' round='0' color='orange' model='normal'></tm-checkbox> 我已阅读并同意 <span>《阿力租车隐私政策》</span>
		</view>
		<tm-message ref="toast"></tm-message>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:require('@/static/images/register.jpg'),
				email:'',
				password:'',
				checked:false,
				code:''
			}
		},
		methods: {
			daojs(){
				//
				let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if(!reg.test(this.email.trim())){
					// 邮箱格式不正确
					this.$showMsg('error','请输入正确的邮箱')
				}else{
					this.$refs.daojishi.start()
					this.getcode()
				}

			},
			async getcode(){
				const Rres = await  this.$wxRequest({
					url:'/wx/emailcode',
					method:'POST',
					data:{
						code:this.code,
						email:this.email,
					}
				})
				if(Rres.statusCode==200){
					this.showMsg('success','发送成功，请等待..')
				}
				
			},
			// 提示信息
			showMsg(type,text,time=1500){
				this.$refs.toast.show({model:type,mask:false,label:text,wait:time})
			},
			// 点击注册
			submit(){
				if(this.code&&this.email&&this.password){
					this.doRegister()
				}else{
					
				}
			},
			async doRegister(){
				const Rres = await this.$wxRequest({
					url:'/wx/register',
					method:'POST',
					data:{
						email:this.email,
						password:this.password,
						code:this.code,
						openid:uni.getStorageSync('openid')
					}
				})
				console.log('注册后返回数据',Rres);
				if(Rres.data.code ==200){
					uni.setStorageSync('USERSTATUS',true)
					uni.setStorageSync('token',Rres.data.token)
					// this.$showMsg('success',Rres.data.msg)
					// 回到我的页面
					 uni.switchTab({
					 	url:'/pages/my/my'
					 })
				}else{
					this.$showMsg('error',Rres.data.msg)
				}
			},
			changeCheck(e){
		
				this.checked = e.checked
				// this.checked = !e.checked
			}
		}
	}
</script>

<style lang="scss" scoped>
.register{
	.register_text{
		font-size: 60rpx;
		color: #ff8f00;
		font-weight: 700;
		text-align: center;
		height: 200rpx;
		line-height: 200rpx;
	}
	.form_data{
		width: 95%;
		margin: auto;
	}
	.register_xy{
		margin-top: 100rpx;
		font-size: 20rpx;
		color: #5a5a5a;
		text-align: center;
		span{
			color: #ff8f00;
		}
	}
}
</style>
